<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <!--Title-->
    <title>Divano - Furniture HTML Template</title>

    <!--CSS bundle -->
    <link rel="stylesheet" media="all" href="css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="css/animate.css" />
    <link rel="stylesheet" media="all" href="css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="css/magnific-popup.css" />
    <link rel="stylesheet" media="all" href="css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="css/theme.css" />

    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Rajdhani:400,600,700&amp;subset=latin-ext" rel="stylesheet">


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <style>
        .linear .icon {
            font-size: 50px;
        }

        .linear .icon, .linear .mls {
            display: block;
            text-align: center;
        }

        hr {
            border-color: #ddd;
        }
    </style>

</head>

<body>

    <div class="page-loader d-none"></div>

    <div class="wrapper" style="overflow:visible">

        <div class="inc:_header.html"></div>

        <section class="shortcodes">

            <div class="container">

                <div class="row">

                    <!--left menu-->

                    <div class="col-md-3">

                        <div class="sticky-top" style="top: 20px;">
                            <div class="card">
                                <div class="card-header">
                                    Shorcut navigation
                                </div>
                                <div class="list-group">
                                    <a class="list-group-item" href="#wellcome">Wellcome</a>
                                    <a class="list-group-item" href="#slider">Slider</a>
                                    <a class="list-group-item" href="#icons">Icons</a>
                                    <a class="list-group-item" href="#customcards">3D Hover Cards</a>
                                    <a class="list-group-item" href="#hovercard">Hover Cards</a>
                                    <a class="list-group-item" href="#member">Member</a>
                                    <a class="list-group-item" href="#cards">Cards</a>
                                    <a class="list-group-item" href="#figure">Figures</a>
                                    <a class="list-group-item" href="#headings">Headings</a>
                                    <a class="list-group-item" href="#badges">Badges</a>
                                    <a class="list-group-item" href="#buttons">Buttons</a>
                                    <a class="list-group-item" href="#alerts">Alerts</a>
                                    <a class="list-group-item" href="#progressbar">Progress bars</a>
                                    <a class="list-group-item" href="#shaddows">Shaddows</a>
                                    <a class="list-group-item" href="#breadcrumb">Breadrumbs</a>
                                    <a class="list-group-item" href="#pagination">Pagination</a>
                                    <a class="list-group-item" href="#forms">Forms</a>
                                    <a class="list-group-item" href="#tables">Tables</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--right content-->

                    <div class="col-md-9">


                        <!-- ============ Jumbotron ============ -->

                        <div id="wellcome">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Jumbotron</h5>
                                    <div class="jumbotron">
                                        <h1 class="display-4">Hello, world!</h1>
                                        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                                        <hr class="my-4">
                                        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                                        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Slider ============ -->

                        <div id="slider">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Slider</h5>
                                    <div class="header-content">
                                        <div class="owl-slider owl-carousel owl-theme">

                                            <!--Slide item-->

                                            <div class="item d-flex align-items-center" style="background-image:url(assets/images/slide-2.jpg)">
                                                <div class="p-5">
                                                    <div class="caption">
                                                        <div class="animated" data-start="fadeInUp">
                                                            <div class="promo pt-3">
                                                                <div class="title title-sm p-0 m-0">Sofa Grace</div>
                                                            </div>
                                                        </div>
                                                        <div class="animated" data-start="fadeInUp">
                                                            Score new arrivals from latest items
                                                            <br />
                                                            Multipurpose eCommerce template ready
                                                        </div>
                                                        <div class="animated" data-start="fadeInUp">
                                                            <div class="pt-3">
                                                                <a href="#" target="_blank" class="btn btn-outline-warning">Buy now</a>
                                                                <a href="#" target="_blank" class="btn btn-outline-light"> Get first discount</a>
                                                            </div>
                                                        </div>
                                                        <div class="animated" data-start="fadeInUp">
                                                            <div class="promo pt-5">
                                                                <div class="h6 p-0 m-0">Get special price</div>
                                                                <div class="price">
                                                                    <span>$1499,99</span>
                                                                    <span>3499,99</span>
                                                                </div>
                                                                <small>** Product prices with discount are available until the end of stock </small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div> <!--/owl-slider-->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Jumbtron ============ -->

                        <div id="icons">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Icons</h5>
                                    <div class="owl-icons-wrapper">
                                        <div class="container">

                                            <div class="owl-icons owl-carousel owl-theme" data-icons="4">

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-sofa.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Sofa</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-armchair.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Armchairs</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-chair.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Chairs</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-dining.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Dining tables</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-mediacabinet.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Media storage</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-table.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Tables</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-bookcase.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Bookcase</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-bedroom.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Bedroom</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-nightstand.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Nightstand</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-kidsroom.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Children room</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-kitchen.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Kitchen</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-bathroom.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Bathroom</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-wardrobe.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Wardrobe</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-shocabinet.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Shoe cabinet</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-office.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Office</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-barset.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Bar sets</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-light.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Lightning</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-carpet.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Carpet</figcaption>
                                                    </figure>
                                                </a>

                                                <a href="#">
                                                    <figure>
                                                        <div class="image">
                                                            <img src="assets/icons/icon-accessories.svg" alt="Alternate Text" />
                                                        </div>
                                                        <figcaption>Accessories</figcaption>
                                                    </figure>
                                                </a>

                                            </div> <!--/owl-icons-->
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Custom cards ============ -->

                        <div id="customcards">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">3D Hover cards</h5>
                                    <div class="blog blog-block">
                                        <!--Item-->
                                        <article style="width:24rem;">
                                            <div data-3d>
                                                <a href="products-grid.html">
                                                    <div class="image">
                                                        <img src="assets/images/product-1.jpg" alt="" />
                                                    </div>
                                                    <div class="entry entry-block">
                                                        <div class="date">2020 Collection</div>
                                                        <div class="title">
                                                            <h2 class="h4">Beedroms</h2>
                                                        </div>
                                                        <div class="description">
                                                            <p>
                                                                Top picks four your desire
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="show-more">
                                                        <span class="btn btn-clean">Shop now</span>
                                                    </div>
                                                </a>
                                            </div>
                                        </article>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <!-- ============ Custom cards ============ -->

                        <div id="hovercard">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Hover card</h5>
                                    <div class="blog blog-block">
                                        <article style="width:24rem;">
                                            <div class="image">
                                                <img src="assets/images/bedroom-1.jpg" alt="" />
                                            </div>
                                            <div class="entry entry-block">
                                                <div class="date">Quality</div>
                                                <div class="title">
                                                    <h2 class="h3">Best materials</h2>
                                                </div>
                                                <div class="description">
                                                    <p>
                                                        We know that honest, sustainable materials create long-lasting and durable furniture.
                                                        All our designs are made from the best materials, which is why we always give you a
                                                        5 years guarantee on everything in our collection
                                                    </p>
                                                    <p><a href="#" class="btn btn-main-white btn-sm">Read more</a></p>
                                                </div>
                                            </div>
                                        </article>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <!-- ============ Member ============ -->

                        <div id="member">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Members</h5>
                                    <div class="team">
                                        <article style="width:20rem;">
                                            <div class="details details-text">
                                                <div class="inner">
                                                    <h5 class="title">Jason Richards</h5>
                                                    <h6 class="title">Supervisor</h6>
                                                </div>
                                            </div>
                                            <div class="image">
                                                <img src="assets/images/person-4.jpg" alt="" />
                                            </div>
                                            <div class="details details-social">
                                                <div class="inner">
                                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                                    <a href="#"><i class="fa fa-linkedin"></i></a>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Cards ============ -->

                        <div id="cards">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Cards <small>default</small></h5>
                                    <div class="card" style="width: 22rem;">
                                        <img class="card-img-top" src="assets/images/box-1.jpg" alt="Card image cap">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                            <a href="#" class="btn btn-primary">Go somewhere</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- ============ Figures ============ -->

                        <div id="figure">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Figure <small>default</small></h5>
                                    <figure class="figure">
                                        <img src="assets/images/box-1.jpg" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                                        <figcaption class="figure-caption">A caption for the above image.</figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Headings ============ -->

                        <div id="headings">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Headings</h5>
                                    <h1>h1. Main heading</h1>
                                    <p>No magna nibh aliquip ea dolore eos amet dolor stet eros eirmod duo elitr sed magna ut aliquyam labore erat ut eros et consequat nulla amet sanctus sadipscing nulla augue et consetetur nihil possim eos minim amet sanctus ea amet</p>
                                    <h2>h2. Main heading</h2>
                                    <h3>h3. Main heading</h3>
                                    <h4>h4. Main heading</h4>
                                    <h5>h5. Main heading</h5>
                                    <h6>h6. Main heading</h6>
                                    <hr />
                                    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                                    <p><del>This line of text is meant to be treated as deleted text.</del></p>
                                    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                                    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
                                    <p><u>This line of text will render as underlined</u></p>
                                    <p><small>This line of text is meant to be treated as fine print.</small></p>
                                    <p><strong>This line rendered as bold text.</strong></p>
                                    <p><em>This line rendered as italicized text.</em></p>
                                    <hr />
                                    <blockquote class="blockquote">
                                        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                    </blockquote>
                                </div>
                            </div>

                        </div>

                        <!-- ============ Badges ============ -->

                        <div id="badges">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Badges</h5>
                                    <span class="badge badge-primary">Primary</span>
                                    <span class="badge badge-secondary">Secondary</span>
                                    <span class="badge badge-success">Success</span>
                                    <span class="badge badge-danger">Danger</span>
                                    <span class="badge badge-warning">Warning</span>
                                    <span class="badge badge-info">Info</span>
                                    <span class="badge badge-light">Light</span>
                                    <span class="badge badge-dark">Dark</span>
                                    <hr />
                                    <span class="badge badge-pill badge-primary">Primary</span>
                                    <span class="badge badge-pill badge-secondary">Secondary</span>
                                    <span class="badge badge-pill badge-success">Success</span>
                                    <span class="badge badge-pill badge-danger">Danger</span>
                                    <span class="badge badge-pill badge-warning">Warning</span>
                                    <span class="badge badge-pill badge-info">Info</span>
                                    <span class="badge badge-pill badge-light">Light</span>
                                    <span class="badge badge-pill badge-dark">Dark</span>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Buttons ============ -->

                        <div id="buttons">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Buttons</h5>
                                    <button type="button" class="btn btn-primary">Primary</button>
                                    <button type="button" class="btn btn-secondary">Secondary</button>
                                    <button type="button" class="btn btn-success">Success</button>
                                    <button type="button" class="btn btn-danger">Danger</button>
                                    <button type="button" class="btn btn-warning">Warning</button>
                                    <button type="button" class="btn btn-info">Info</button>
                                    <button type="button" class="btn btn-light">Light</button>
                                    <button type="button" class="btn btn-dark">Dark</button>
                                    <button type="button" class="btn btn-link">Link</button>
                                    <hr />
                                    <button type="button" class="btn btn-outline-primary">Primary</button>
                                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                    <button type="button" class="btn btn-outline-success">Success</button>
                                    <button type="button" class="btn btn-outline-danger">Danger</button>
                                    <button type="button" class="btn btn-outline-warning">Warning</button>
                                    <button type="button" class="btn btn-outline-info">Info</button>
                                    <button type="button" class="btn btn-outline-light">Light</button>
                                    <button type="button" class="btn btn-outline-dark">Dark</button>
                                    <hr />
                                    <button type="button" class="btn btn-primary btn-lg">Large button</button>
                                    <button type="button" class="btn btn-secondary btn-lg">Large button</button>
                                </div>
                            </div>

                        </div>

                        <!-- ============ Alerts ============ -->

                        <div id="alerts">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Alerts</h5>
                                    <div class="alert alert-primary" role="alert">
                                        A simple primary alert—check it out!
                                    </div>
                                    <div class="alert alert-secondary" role="alert">
                                        A simple secondary alert—check it out!
                                    </div>
                                    <div class="alert alert-success" role="alert">
                                        A simple success alert—check it out!
                                    </div>
                                    <div class="alert alert-danger" role="alert">
                                        A simple danger alert—check it out!
                                    </div>
                                    <div class="alert alert-warning" role="alert">
                                        A simple warning alert—check it out!
                                    </div>
                                    <div class="alert alert-info" role="alert">
                                        A simple info alert—check it out!
                                    </div>
                                    <div class="alert alert-light" role="alert">
                                        A simple light alert—check it out!
                                    </div>
                                    <div class="alert alert-dark" role="alert">
                                        A simple dark alert—check it out!
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- ============ Progress bar ============ -->

                        <div id="progressbar">

                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Progress bar</h5>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <hr />
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <hr />
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <hr />
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <hr />
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- ============ Shaddows ============ -->

                        <div id="shaddows">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Shaddows</h5>
                                    <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
                                    <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
                                    <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
                                    <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Breadcrumb ============ -->

                        <div id="breadcrumb">
                            <div class="card">
                                <div class="card-body">
                                    <div class="titles">Breadcrumb</div>
                                    <h5 class="card-title">Shaddows</h5>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                                        </ol>
                                    </nav>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                            <li class="breadcrumb-item active" aria-current="page">Library</li>
                                        </ol>
                                    </nav>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                            <li class="breadcrumb-item"><a href="#">Library</a></li>
                                            <li class="breadcrumb-item active" aria-current="page">Data</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Pagination ============ -->

                        <div id="pagination">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Pagination</h5>
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                                        </ul>
                                    </nav>
                                    <hr />
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item">
                                                <a class="page-link" href="#" aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                    <span class="sr-only">Previous</span>
                                                </a>
                                            </li>
                                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item">
                                                <a class="page-link" href="#" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                    <span class="sr-only">Next</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                    <hr />
                                    <nav aria-label="...">
                                        <ul class="pagination">
                                            <li class="page-item disabled">
                                                <a class="page-link" href="#" tabindex="-1">Previous</a>
                                            </li>
                                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                                            <li class="page-item active">
                                                <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                                            </li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item">
                                                <a class="page-link" href="#">Next</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Forms ============ -->

                        <div id="forms">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Forms</h5>
                                    <form>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Email address</label>
                                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleInputPassword1">Password</label>
                                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                        </div>
                                        <div class="form-group form-check">
                                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                            <label class="form-check-label" for="exampleCheck1">Check me out</label>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </form>
                                    <hr />
                                    <form>
                                        <div class="form-group">
                                            <label for="exampleFormControlInput1">Email address</label>
                                            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleFormControlSelect1">Example select</label>
                                            <select class="form-control" id="exampleFormControlSelect1">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleFormControlSelect2">Example multiple select</label>
                                            <select multiple class="form-control" id="exampleFormControlSelect2">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="exampleFormControlTextarea1">Example textarea</label>
                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                        </div>
                                    </form>
                                    <hr />
                                    <form>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="inputEmail4">Email</label>
                                                <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="inputPassword4">Password</label>
                                                <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputAddress">Address</label>
                                            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                                        </div>
                                        <div class="form-group">
                                            <label for="inputAddress2">Address 2</label>
                                            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="inputCity">City</label>
                                                <input type="text" class="form-control" id="inputCity">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="inputState">State</label>
                                                <select id="inputState" class="form-control">
                                                    <option selected>Choose...</option>
                                                    <option>...</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-2">
                                                <label for="inputZip">Zip</label>
                                                <input type="text" class="form-control" id="inputZip">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="gridCheck">
                                                <label class="form-check-label" for="gridCheck">
                                                    Check me out
                                                </label>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Sign in</button>
                                    </form>
                                    <hr />
                                    <form>
                                        <div class="form-group row">
                                            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                                            <div class="col-sm-10">
                                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
                                            <div class="col-sm-10">
                                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                            </div>
                                        </div>
                                        <fieldset class="form-group">
                                            <div class="row">
                                                <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
                                                <div class="col-sm-10">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                                                        <label class="form-check-label" for="gridRadios1">
                                                            First radio
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                                                        <label class="form-check-label" for="gridRadios2">
                                                            Second radio
                                                        </label>
                                                    </div>
                                                    <div class="form-check disabled">
                                                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                                                        <label class="form-check-label" for="gridRadios3">
                                                            Third disabled radio
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="form-group row">
                                            <div class="col-sm-2">Checkbox</div>
                                            <div class="col-sm-10">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="gridCheck1">
                                                    <label class="form-check-label" for="gridCheck1">
                                                        Example checkbox
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-sm-10">
                                                <button type="submit" class="btn btn-primary">Sign in</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- ============ Tables ============ -->

                        <div id="tables">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Display Headings</h5>
                                    <h1 class="display-1">Display 1</h1>
                                    <h1 class="display-2">Display 2</h1>
                                    <h1 class="display-3">Display 3</h1>
                                    <h1 class="display-4">Display 4</h1>
                                    <hr />
                                    <h5 class="card-title">Tables</h5>
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">First</th>
                                                <th scope="col">Last</th>
                                                <th scope="col">Handle</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>Mark</td>
                                                <td>Otto</td>
                                                <td>@mdo</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">2</th>
                                                <td>Jacob</td>
                                                <td>Thornton</td>
                                                <td>@fat</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">3</th>
                                                <td>Larry</td>
                                                <td>the Bird</td>
                                                <td>@twitter</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <hr />
                                    <table class="table">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">First</th>
                                                <th scope="col">Last</th>
                                                <th scope="col">Handle</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>Mark</td>
                                                <td>Otto</td>
                                                <td>@mdo</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">2</th>
                                                <td>Jacob</td>
                                                <td>Thornton</td>
                                                <td>@fat</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">3</th>
                                                <td>Larry</td>
                                                <td>the Bird</td>
                                                <td>@twitter</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <hr />
                                    <table class="table">
                                        <thead class="thead-light">
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">First</th>
                                                <th scope="col">Last</th>
                                                <th scope="col">Handle</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row">1</th>
                                                <td>Mark</td>
                                                <td>Otto</td>
                                                <td>@mdo</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">2</th>
                                                <td>Jacob</td>
                                                <td>Thornton</td>
                                                <td>@fat</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">3</th>
                                                <td>Larry</td>
                                                <td>the Bird</td>
                                                <td>@twitter</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>

                </div><!--/row-->

            </div> <!--/container-->
        </section>

        <div class="inc:_footer.html"></div>

    </div> <!--/wrapper-->
    <!--Scripts -->
    <!--Scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/include.js"></script>
    <script src="js/ion.rangeSlider.js"></script>
    <script src="js/magnific-popup.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/tilt.jquery.js"></script>
    <script src="js/jquery.easypiechart.js"></script>
    <script src="js/bigtext.js"></script>
    <script src="js/main.js"></script>

    <script>
        $(function () {

            // Shorcodes - Scroll to
            // ----------------------------------------------------------------
            var $a = $('.list-group a');
            $a.click(function () {
                $a.removeClass('active');
                $(this).addClass('active');
                $('html, body').animate({
                    scrollTop: $($(this).attr('href')).offset().top + -20
                }, 500);
                return false;
            });

        });
    </script>
</body>

</html>